import UserSetting from './components/userSetting';
import { createBehavior, createResource } from '@inbiz/core';
import {
  createInbizSchema,
  createBaseSchema,
  createComponentStyleSchema,
  createDecoratorStyleSchema,
  createSoureSchema,
  createRelationSchema,
  createComponentLayout,
  createControllerSchema
} from '@inbiz/setters';
import { Tree } from './locale';
import { UnitEnum } from './components/shared';

/**
 * 1.属性的默认值:defaultProps
 * 2.属性的json数据
 * */

export const defaultProps = {
  minWidth: undefined,
  maxWidth: undefined,
  minHeight: undefined,
  maxHeight: undefined,
  expandNode: false,
  // isHide: false,
  multiple: false,
  // showLine: false,
  showIcon: false,
  searchPlaceholder: 'Tree.searchKeywords',
  // showLeafIcon: false,
  checkable: false,
  draggable: false,
  checkStrictly: false,
  config: {
    operations: [],
    IconsSettings: {
      config: [],
      type: 'normal',
    },
    fieldRelation: {
      id: '',
      parentId: '',
      label: '',
      rootId: '',
      selectedId: '',
    } as { id: string; parentId: string; label: string; rootId?: string; selectedId?: string },
    formItems: {
      width: {
        widowWidth: 60,
        widthSuffix: UnitEnum.percentage,
      },
      height: {
        windowHeight: 60,
        heightSuffix: UnitEnum.percentage,
      },
    },
  },
  businessData: {},
  readOnly: false,
};

export const SchemaTree = createInbizSchema({
  attribute: {
    ...createBaseSchema(
      {
        readOnly: {
          type: 'string',
          enum: [false, true],
          'x-decorator': 'FormItem',
          'x-component': 'Select',
          'x-component-props': {
            defaultValue: 'editable',
          },
        },
        showIcon: {
          type: 'boolean',
          'x-decorator': 'FormItem',
          'x-component': 'Switch',
        },
        expandNode: {
          type: 'boolean',
          'x-decorator': 'FormItem',
          'x-component': 'Switch',
        },
        checkable: {
          type: 'boolean',
          'x-decorator': 'FormItem',
          'x-component': 'Switch',
        },
        checkStrictly: {
          type: 'boolean',
          'x-decorator': 'FormItem',
          'x-component': 'Select',
          default: false,
          enum: [false, true],
          'x-reactions': {
            dependencies: ['.checkable'],
            when: '{{$deps[0] == true}}',
            fulfill: {
              state: {
                visible: true,
              },
            },
            otherwise: {
              state: {
                visible: false,
              },
            },
          },
        },
        search: {
          type: 'boolean',
          'x-decorator': 'FormItem',
          'x-component': 'Switch',
          'x-reactions': {
            dependencies: ['.checkable'],
            when: '{{$deps[0] == true}}',
            fulfill: {
              state: {
                visible: false,
              },
            },
            otherwise: {
              state: {
                visible: true,
              },
            },
          },
        },
        searchIcon: {
          default: { color: '#aaa', type: 'icon-sousuo' },
          type: 'object',
          'x-decorator': 'FormItem',
          'x-component': 'IconPicker',
          'x-component-props': {
            showIconSize: false,
          },
          'x-reactions': {
            dependencies: ['.search'],
            fulfill: {
              schema: {
                'x-visible': '{{$deps[0] == true}}',
              },
            },
          },
        },
        searchPosition: {
          default: 'right',
          type: 'string',
          'x-decorator': 'FormItem',
          'x-component': 'Radio.Group',
          enum: ['left', 'right'],
          'x-reactions': {
            dependencies: ['.search'],
            fulfill: {
              schema: {
                'x-visible': '{{$deps[0] == true}}',
              },
            },
          },
        },
        searchPlaceholder: {
          type: 'string',
          'x-decorator': 'FormItem',
          'x-component': 'MultilingualInput',
          'x-reactions': {
            dependencies: ['.search'],
            fulfill: {
              state: {
                hidden: '{{$deps[0] != true}}',
              },
            },
          },
        },
        draggable: {
          type: 'boolean',
          'x-decorator': 'FormItem',
          'x-component': 'Switch',
        },
        config: {
          type: 'object',
          'x-decorator': 'FormItem',
          'x-component': (props) => {
            // 表单内所有数据
            return <UserSetting {...props} />;
          },
        },
      },
      {},
      true,
    ),
    ...createRelationSchema(
      {
        range: 'current',
        filter: 'Table',
      },
      {
        relationField: {
          type: 'string',
          'x-decorator': 'FormItem',
          'x-component': 'Input',
        },
      },
    ),
  },
  style: {
    ...createComponentStyleSchema({
      maxHeight: {
        type: 'string',
        'x-decorator': 'FormItem',
        'x-component': 'SizeInput',
      },
    }),
    ...createComponentLayout(),
    ...createDecoratorStyleSchema(),
  },
  senior: {
    ...createSoureSchema({
      isApi: true,
      props: {
        isPrimaryKey: false,
        resultKeys: ['Rows'],
      },
      fieldChange: (form, value) => {
        const config = form.query(/config$/).take();
        let isClear = true;
        if (
          (value?.sourcetype === 'model' || value?.sourcetype === 'api') &&
          value?.value == value?.oldValue?.value
        ) {
          isClear = false;
        }
        if (value?.sourcetype === 'custom' && value?.['url'] == value?.oldValue?.['url']) {
          isClear = false;
        }
        if (config['value'] && isClear) {
          config['value'] = {
            ...config['value'],
            fieldRelation: {
              id: '',
              label: '',
              parentId: '',
              rootId: '',
              selectedId: '',
            },
          };
        }
      },
    }),
  },
  controller: createControllerSchema({
    events: [{
      name: 'onClick',
      label: '点击',
      platform: 'web'
    }, {
      name: 'onload',
      label: '加载',
      platform: 'web'
    }, {
      name: 'onSelect',
      label: '选中',
      platform: 'web'
    }, {
      name: 'onExPand',
      label: '展开',
      platform: 'web'
    }, {
      name: 'onRightClick',
      label: '右击',
      platform: 'web'
    }, {
      name: 'onload',
      label: '加载',
      platform: 'web'
    }, {
      name: 'onError',
      label: '报错',
      platform: 'web'
    }, {
      name: 'onDragStart',
      label: '拖拽开始',
      platform: 'web'
    }, {
      name: 'onDragEnd',
      label: '拖拽结束',
      platform: 'web'
    }, {
      name: 'onDragEnter',
      label: '拖入',
      platform: 'web'
    }, {
      name: 'onDragLeave',
      label: '拖拽离开',
      platform: 'web'
    }, {
      name: 'onDrop',
      label: '拖拽放开',
      platform: 'web'
    }, {
      name: 'onDragOver',
      label: '拖拽结束',
      platform: 'web'
    }, {
      name: 'onOpen',
      label: '打开',
      platform: 'web'
    }, {
      name: 'onClose',
      label: '关闭',
      platform: 'web'
    }, {
      name: 'onAdd',
      label: '新增',
      platform: 'web'
    }, {
      name: 'onEdit',
      label: '编辑',
      platform: 'web'
    }, {
      name: 'onDelete',
      label: '删除',
      platform: 'web'
    }, {
      name: 'onSuccess',
      label: '成功',
      platform: 'web'
    }, {
      name: 'onBeforeRelation',
      label: '关联之前',
      isConfigEvent: true,
      platform: 'web'
    }, {
      name: 'onSearch',
      label: '搜索',
      isConfigEvent: true,
      platform: 'web'
    }, {
      name: 'onBeforeOpen',
      label: '打开之前',
      isConfigEvent: true,
      platform: 'web'
    },{
      name: 'onBeforeClose',
      label: '关闭之前',
      isConfigEvent: true,
      platform: 'web'
    },{
      name: 'onRequest',
      label: '自定义请求',
      isConfigEvent: true,
      platform: 'web'
    },{
      name: 'onData',
      label: '格式化数据',
      isConfigEvent: true,
      platform: 'web'
    },{
      name: 'onTitleRender',
      label: '格式化标题',
      isConfigEvent: true,
      platform: 'web'
    }, ]
  })
});

export const Behavior = createBehavior({
  extends: ['Field'],
  name: 'Tree',
  selector: (node) => node.props?.['x-component'] === 'Tree',
  designerLocales: Tree,
  designerProps: { propsSchema: SchemaTree },
});

export const Resource = createResource({
  icon: 'Tree',
  elements: [
    {
      componentName: 'Field',
      props: {
        title: {
          status: true,
          value: 'Tree.title',
        },
        type: 'void',
        'x-decorator': 'FormItem',
        'x-component': 'Tree',
        'x-component-props': defaultProps,
      },
    },
  ],
});
